<template>
	<view>
		<view>
			<view style="display: flex;flex-wrap: nowrap;">
				<view class="topbox">
					<view style="color: gray;">今日充值金额</view>
					<view class="numstyle">¥{{topdata.jrczje||0}}</view>
					<view style="color: #888888;">昨日:¥{{lastday.drcz||0}}</view>
				</view>
				<view class="topbox">
					<text style="color: gray;">今日消耗</text>
					<view class="numstyle" style="padding-right: 20rpx;">
						¥{{topdata.jrxh||0}}
						<text style="margin: 0 10rpx;"></text>
						<el-link icon="el-icon-edit" @click="edit_jrxh">修改</el-link>
					</view>
					<view style="color: #888888;">昨日:{{lastday.drxh||0}}</view>
				</view>
				<view class="topbox">
					<text style="color: gray;">3日ROI</text>
					<view class="numstyle">{{topdata.jrroi||0}}</view>
					<view style="color: #888888;">昨日:{{lastday.jrroi||0}}</view>
				</view>
				<view class="topbox">
					<text style="color: gray;">新用户充值人数</text>
					<view class="numstyle">{{topdata.xyhczrs||0}}</view>
					<view style="color: #888888;">昨日:{{lastday.xyhczrs||0}}</view>
				</view>
				<view class="topbox">
					<text style="color: gray;">新用户数</text>
					<view class="numstyle">{{topdata.xyhs||0}}</view>
					<view style="color: #888888;">昨日:{{lastday.xyhs||0}}</view>
				</view>
				
			</view>

			<view style="display: flex;flex-wrap: nowrap;">
				<view class="topbox">
					<text style="color: gray;">今日充值笔数</text>
					<view class="numstyle">{{topdata.jrczbs||0}}</view>
					<view style="color: #888888;">昨日:{{lastday.drczbs||0}}</view>
				</view>
				<view class="topbox">
					<view style="color: gray;">今日充值人数</view>
					<view class="numstyle">{{topdata.jrczrs||0}}</view>
					<view style="color: #888888;">昨日:{{lastday.drczrs||0}}</view>
				</view>
				<view class="topbox">
					<text style="color: gray;">首日ROI</text>
					<view class="numstyle">{{topdata.srroi||0}}</view>
					<view style="color: #888888;">昨日:{{lastday.srroi||0}}</view>
				</view>
				<view class="topbox">
					<text style="color: gray;">新用户充值金额</text>
					<view class="numstyle">¥{{topdata.xyhczje||0}}</view>
					<view style="color: #888888;">昨日:¥{{lastday.xyhczje||0}}</view>
				</view>
				<view class="topbox">
					<text style="color: gray;">新用户付费率</text>
					<view class="numstyle">{{topdata.xyhffl||0}}%</view>
					<view style="color: #888888;">昨日:{{lastday.xyhffl||0}}%</view>
				</view>
<!-- 				<view class="topbox">
					<text style="color: gray;">新用户up值</text>
					<view class="numstyle">¥{{topdata.xyhupz||0}}</view>
					<view style="color: #888888;">昨日:¥{{lastday.xyhupz||0}}</view>
				</view>
				<view class="topbox">
					<text style="color: gray;">付费新用户up值</text>
					<view class="numstyle">¥{{topdata.xyhffupz||0}}</view>
					<view style="color: #888888;">昨日:¥{{lastday.xyhffupz||0}}</view>
				</view> -->
			</view>
		</view>


		<view class="box2">
			<view style="width: 100%;flex-wrap: nowrap;">
				<view>
					<el-switch v-model="showzxt" active-text="展示折线图">
					</el-switch>
					<text style="color: gray;margin:0 40rpx;">充值/消耗数据统计</text>
					<el-radio-group v-model="radio1" size="medium" @change="change">
						<el-radio-button label="30天"></el-radio-button>
						<el-radio-button label="15天"></el-radio-button>
						<el-radio-button label="7天"></el-radio-button>
					</el-radio-group>
				</view>
			</view>
			<view class="charts-box" v-show="showzxt">
				<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
			</view>
		</view>

		<view>
			<!-- 表格组件开始 -->
			<vk-data-table :height="700" ref="table1" :action="table1.action" :columns="table1.columns"
				:right-btns="['detail_auto']" :row-no="true" :pagination="true">
			</vk-data-table>
			<!-- 表格组件结束 -->
		</view>

	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk = uni.vk; // vk实例
	var originalForms = {}; // 表单初始化数据
	const db = uniCloud.database();

	export default {
		data() {
			return {
				topdata: {
					jrczje: 0,
					jrxh: 0,
					jrroi: 0,
					srroi: 0,
					xyhczje: 0,
					xyhffl: 0,
				},
				lastday: {},
				showzxt: true,
				radio1: "30天",
				// 表格相关开始 -----------------------------------------------------------
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2
						}
					}
				},
				// 表格相关开始 -----------------------------------------------------------
				table1: {
					// 表格数据请求地址
					action: "admin/pages/kh/tjsj/tfkb/getList",
					columns: [
						// {
						// 	"key": "agent_username",
						// 	"title": "代理商用户名",
						// 	"type": "text",
						// 	"width": 120
						// },
						{
							"key": "date",
							"title": "日期",
							"type": "text",
							"width": 100
						},
						{
							"key": "drxh",
							"title": "当日消耗",
							"type": "number",
							"width": 100
						},
						{
							"key": "drcz",
							"title": "当日充值",
							"type": "number",
							"width": 100
						},
						{
							"key": "jrroi",
							"title": "3日ROI",
							"type": "number",
							"width": 120
						},
						{
							"key": "srroi",
							"title": "首日ROI",
							"type": "number",
							"width": 100
						},
						{
							"key": "xyhffcb",
							"title": "新用户付费成本",
							"type": "number",
							"width": 130
						},
						{
							"key": "xyhffl",
							"title": "新用户付费率",
							"type": "number",
							"width": 130
						},
						{
							"key": "xyhs",
							"title": "新用户数",
							"type": "number",
							"width": 100
						},
						{
							"key": "xyhczje",
							"title": "新用户充值金额",
							"type": "number",
							"width": 130
						},
						{
							"key": "xyhczrs",
							"title": "新用户充值人数",
							"type": "number",
							"width": 130
						},
						// {//新用户一人只回传一笔，所以等于新用户充值人数
						// 	"key": "xyhczbs",
						// 	"title": "新用户充值笔数",
						// 	"type": "number",
						// 	"width": 130
						// },
						{
							"key": "drczrs",
							"title": "当日充值人数",
							"type": "number",
							"width": 110
						},
						{
							"key": "drczbs",
							"title": "当日充值笔数",
							"type": "number",
							"width": 110
						},
						{
							"key": "hcbs",
							"title": "回传笔数",
							"type": "number",
							"width": 100
						},
						{
							"key": "hcje",
							"title": "回传金额",
							"type": "number",
							"width": 100
						},
						// {
						// 	"key": "remark1",
						// 	"title": "备注-描述",
						// 	"type": "text",
						// 	"width": 200
						// },
						// {
						// 	"key": "remark2",
						// 	"title": "备注-广告ID",
						// 	"type": "text",
						// 	"width": 200
						// },
						// {
						// 	"key": "remark3",
						// 	"title": "备注-投放链接",
						// 	"type": "text",
						// 	"width": 200
						// }
					],
					// 多选框选中的值
					multipleSelection: [],
					// 当前高亮的记录
					selectItem: ""
				},
				// 表格相关结束 -----------------------------------------------------------
			};
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.options = options;
			uni.setStorageSync('time', vk.pubfn.getCommonTime(new Date()))
		},
		onShow() {
			// if (vk.vuex.get('$user.userInfo.role[0]') != "admin") {
			// 	uni.navigateTo({
			// 		url:"/pages/dls/sjkb"
			// 	})
			// }
			this.today_data()
			this.get_lastday()
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			async get_lastday() {
				let datas = await db.collection('a_datas').where({ type: 0 }).orderBy('_add_time', "desc").limit(1)
					.get()
				if (datas.result.data.length > 0) {
					this.lastday = datas.result.data[0]
				}
			},
			async change(e) {
				console.log("e=", e);
				if (e == "30天") {
					this.getServerData(30)
					return;
				}
				if (e == "15天") {
					this.getServerData(15)
					return;
				}
				if (e == "7天") {
					this.getServerData(7)
					return;
				}
			},
			async getServerData(days) {
				vk.callFunction({
					url: 'admin/pages/kh/tjsj/tfkb/zhexiantu',
					title: '请求中...',
					data: {
						days: days || 30
					},
					success: (data) => {
						this.cal_data(data)
					}
				});
			},
			async cal_data(data) {
				//从数组中取一个元素，组成新的数组
				let dates = await vk.pubfn.arrayObjectGetArray(data.categories, 'date')
				dates = dates.reverse() //数组里的元素倒序排列
				//避免折线图x轴日期显示重叠，替换掉年份
				var newdate = new Date().getFullYear() + '-'
				for (var i = 0; i < dates.length; i++) {
					dates[i] = dates[i].replace(newdate, "")
				}
				let drcz = await vk.pubfn.arrayObjectGetArray(data.datas, 'drcz')
				console.log("drcz0=", drcz);
				let drxh = await vk.pubfn.arrayObjectGetArray(data.datas, 'drxh')
				drcz = drcz.reverse() //数组里的元素倒序排列
				drxh = drxh.reverse()
				let res = {
					categories: dates,
					series: [{
							name: "当日充值",
							data: drcz
						},
						{
							name: "当日消耗",
							data: drxh
						}
					]
				}
				this.chartData = JSON.parse(JSON.stringify(res));
			},
			today_data(jrxh) {
				let time = uni.getStorageSync('time');
				let todayStart = time.todayStart;
				console.log("yestodayStart=", todayStart - 86400000);
				console.log("yestodayend=", todayStart - 1);
				vk.callFunction({
					url: 'admin/pages/kh/tjsj/tfkb/today_data',
					title: '请求中...',
					data: {
						jrxh: jrxh || 0,
						todayStart: todayStart
					},
					success: (data) => {
						console.log("data=", data);
						this.topdata.jrczje = vk.pubfn.toDecimal(data.jrczje / 100, 2); //今日充值金额
						this.topdata.jrxh = data.jrxh; //今日消耗
						this.topdata.jrroi = vk.pubfn.toDecimal(this.topdata.jrczje / this.topdata.jrxh,
							2); //今日roi
						this.topdata.xyhczje = vk.pubfn.toDecimal(data.xyhczje / 100, 2); //新用户充值金额
						this.topdata.srroi = vk.pubfn.toDecimal(data.xyhczje / data.jrxh / 100, 2); //首日roi
						this.topdata.xyhffl = vk.pubfn.toDecimal(data.xffyh / data.num * 100,
							2); //新用户付费率
						this.topdata.jrczrs = data.jrczrs; //今日充值人数
						this.topdata.jrczbs = data.jrczbs; //今日充值笔数
						this.topdata.xyhczrs = data.xffyh; //新用户充值人数
						this.topdata.xyhs = data.num; //新用户人数
						this.topdata.xyhupz = vk.pubfn.toDecimal(this.topdata.xyhczje / data.num, 2); //新用户付费成本
						this.topdata.xyhffupz = vk.pubfn.toDecimal(this.topdata.xyhczje / this.topdata.xyhczrs,
							2); //新用户付费UP值
					}
				});
			},
			edit_jrxh() {
				this.$prompt('请输入今日消耗金额', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPattern: /[1-9]\d*.\d*|0.\d*[1-9]\d*/,
					inputErrorMessage: '请输入纯数字'
				}).then(({
					value
				}) => {
					this.$message({
						type: 'success',
						message: '计算中，请稍后...'
					});
					this.today_data(value)
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '未修改'
					});
				});
			},

		}
	};
</script>

<style>
	.topbox {
		width: 14%;
		height: 90px;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.2), 0 6rpx 20rpx 0 rgba(0, 0, 0, 0);
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 20rpx;
	}

	.box2 {
		width: 95%;
		display: flex;
		flex-wrap: wrap;
		box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.2), 0 6rpx 20rpx 0 rgba(0, 0, 0, 0);
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 20rpx;
	}

	.numstyle {
		color: #4c4c4c;
		font-size: larger;
		font-weight: bold;
	}

	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 450px;
	}
</style>
